<template>
    <div style="padding:5px;">
        <!-- 头部标题 -->
        <h3>发表评论</h3>
        <van-divider />
        <!-- 文本输入框 -->
        <van-cell-group>
        <van-field v-model="commentsvalue"  rows='2' type="textarea" border label-align="top" placeholder="请输入留言" style="height:96px"/>
        </van-cell-group>
        <!-- 发表评论提交按钮 -->
        <van-button style="width:100%" type="info" @click="Sendgoodscomments">发表评论</van-button>
        <!-- 评论内容 -->
        <!-- 渲染评论数据 -->
        <div v-for="(item, index) in goodscomments" :key="index" class="pinglun">
            <div class="title">第{{index+1}}楼  用户：{{item.user_name}} 发表时间:{{item.add_time | dateFormat}}</div>
            <div class="content">{{item.content}}</div>
        </div>
        <!-- 加载更多按钮 -->
        <van-button plain type="danger" style="width:100%" @click="loadmore">加载更多</van-button>
    </div>
</template>
<script>
export default {
    data () {
        return {
            // 后台评论数据
            goodscomments:[],
            // 输入框内容
            commentsvalue:'',
            //加载页面
            pagenum:2,
        };
    },
    created() {
        // 页面初始化
    this.Getgoodscomments(1)
    },
    methods:{
        // 获取评论数据
        async Getgoodscomments(n) {
            const id = this.$route.params.id - 0
            const {data:res} = await this.$http.get(`/api/getcomments/${id}?pageindex=${n}`)
            this.goodscomments = res.message
            console.log(this.goodscomments);
        },
        //提交评论
        async Sendgoodscomments() {
            const id = this.$route.params.id - 0
            const {data:res} = await this.$http.post(`/api/postcomment/${id}`, {
                params: "this.commentsvalue"
            })
            console.log(res);
            if(res.status !== 0) return this.$message.error('评论失败')
            this.$message.success('评论成功');
            // 清空评论区
            this.commentsvalue=''
        },
        // 加载更多
        async loadmore() {
            const {data:res} = await this.$http.get(`/api/getcomments/${this.$route.params.id}?pageindex=${this.pagenum}`)
            this.goodscomments.push(...res.message)
            this.pagenum++
        }
    }
}
</script>
<style scoped lang="less">
    h3 {
        font-size: 0.7rem;
        margin-left: 5px;
        margin-top: 1rem;
    }
    .pinglun {
        margin-top: 5px;
    }
    .title {
        height: 30px;
        background-color: #ccc;
        font-size: 12px;
        line-height: 30px;
    }
    .content {
        line-height: 35px;
        text-indent: 2em;
        font-size: 12px;
    }
</style>
<style >
.van-cell {
    border: 1px solid #ccc;
    padding: 10px;
    height: 100px!important;
    margin-bottom: 5px;
}
.van-cell__value {
font-size: 12px ;
}
</style>